<template>
	<view class="container">

		<uni-nav-bar title="任务列表" />

		<uni-segmented-control :current="current" :values="items" :style-type="styleType" :active-color="activeColor"
			@clickItem="onClickItem" />
		<view class="content">
			<view v-if="current === 0"><text class="content-text">选项卡1的内容</text></view>
			<view v-if="current === 1"><text class="content-text">选项卡2的内容</text></view>
			<view v-if="current === 2"><text class="content-text">选项卡3的内容</text></view>
		</view>


		<uni-list>

			<uni-list-item title="列表左侧带略缩图" note="列表描述信息" rightText="2023-10-15 10:15"
				show-arrow="true"></uni-list-item>
			<uni-list-item title="列表左侧带略缩图" note="列表描述信息" rightText="2023-10-15 10:15"
				show-arrow="true"></uni-list-item>
			<uni-list-item title="列表左侧带略缩图" note="列表描述信息" rightText="2023-10-15 10:15"
				show-arrow="true"></uni-list-item>
			<uni-list-item title="列表左侧带略缩图" note="列表描述信息" rightText="2023-10-15 10:15"
				show-arrow="true"></uni-list-item>
			<uni-list-item title="列表左侧带略缩图" note="列表描述信息" rightText="2023-10-15 10:15"
				show-arrow="true"></uni-list-item>
			<uni-list-item title="列表左侧带略缩图" note="列表描述信息" rightText="2023-10-15 10:15"
				show-arrow="true"></uni-list-item>

		</uni-list>
	</view>
	</view>
</template>

<script>
	export default {
		onLoad: function() {},
		data() {
			return {
				items: ['选项卡1', '选项卡2', '选项卡3'],
				styles: [{
						value: 'button',
						text: '按钮',
						checked: true
					},
					{
						value: 'text',
						text: '文字'
					}
				],
				current: 0,
				colorIndex: 0,
				activeColor: '#007aff',
				styleType: 'button'
			}
		},

		methods: {
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			}
		}
	}
</script>

<style>



</style>